<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <link rel="stylesheet" type="text/css" href="/css/back_pw.css?v=2018-3-15 18:25:29">
    <link rel="stylesheet" type="text/css" href="/css/common.css?xx=2018-3-15 15:43:04">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<body>

<!-- 弹出层 -->

<div id="M_layer_box" style="display:none"></div>
<div class="mainRight s-m-box">
    <div class="title">忘记密码</div>

    <div class="w740">

        <div class="step step4 clearfix">
            <ul class="clearfix">
                <li class="active"><span>1</span>
                    <p>验证身份</p><b></b></li>
                <!-- 添加active就有下一步的效果 -->
                <li><span>2</span>
                    <p>重置密码</p><b></b></li>
                <li><span>3</span>
                    <p>完成</p><b></b></li>
            </ul>
        </div><!--/step-->

        <div class="tableForm">
            <table>
                <tbody>
                <tr>
                    <td>验证方式</td>
                    <td>
                        <div class="form-select">
                            <div class="form-sltitle">
                                <span>已验证手机</span>
                            </div>
                            <!--<ul class="form-option" id="MS_yanzheng" style="display: none;">-->
                            <!--<li value="已验证手机" class="J-m-selectItem"><a href="javascript:;">已验证手机</a></li>-->
                            <!--<li value="已验证邮箱" class="J-m-selectItem"><a href="javascript:;">已验证邮箱</a></li>-->
                            <!--</ul>-->
                            <input type="hidden">
                        </div><!--/form-select-->
                    </td>
                </tr>

                <tr>
                    <td width="90">手机号</td>
                    <td colspan="3" width="600">
                        <div class="m-pos_parent">
                            <input type="text" class="ui_inp" placeholder="请输入手机号" id="J-m-user" name="phone">
                            <p class="m-pos_son" id="j-m-ckphone1">请输入正确格式的手机号码</p>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>图片验证码</td>
                    <td>
                        <input type="text" class="ui_inp" placeholder="输入图片中验证码" id="J-m-imgIpt">
                    </td>
                    <td width="140">
                        <img src="/validateCode?imgId=68e996c7eaa79f2341c2969c8e23e2f8"
                             height="40" width="130" id="J-m-img" data-imgid="68e996c7eaa79f2341c2969c8e23e2f8">
                    </td>
                    <td>看不清？ <a href="javascript:;" class="org" id="J-m-picChange">换一张</a></td>
                </tr>

                <tr>
                    <td>手机验证码</td>
                    <td width="185">
                        <input type="text" class="ui_inp" placeholder="输入验证码" id="J-m-dxYzm">
                    </td>
                    <td colspan="2">
                        <input type="button" value="获取验证码" class="ui_btn ui_org_btn" id="tel_btn">
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td colspan="3">
                        <input type="button" value="下一步" class="ui_btn disabled ui_org_btn" id="J-m-submit">
                    </td>
                </tr>
                </tbody>
            </table>
        </div>


    </div><!--/w640-->


</div><!--/w640-->
<!--/mainRight-->

<script>

    // 选择联动

    (function () {

        var aSelect = $('.J-m-selectItem');

        var picYzmInp = $('#J-m-imgIpt');
        var picYzm = $('#J-m-img');
        var picBtn = $('#J-m-picChange');


        var username = $('#J-m-user');

        var userYzm = $('#J-m-dxYzm');
        var phoneYzmBtn = $('#tel_btn');

        var oSub = $('#J-m-submit');

        var tishi = $('#j-m-ckphone1');
        var reg = /^1[0-9]{10}$/;
        var userFlag = false;

        aSelect.eq(0).click(function () {
            username.attr('name', 'phone').attr('placeholder', '请输入手机号').val('').parent().parent().prev().html('手机号');
            username
            userYzm.val('').parent().prev().html('手机验证码');
            tishi.html('请输入正确格式的手机号码');
            reg = /^1[0-9]{10}$/;
        });

        aSelect.eq(1).click(function () {
            username.attr('name', 'email').attr('placeholder', '请输入邮箱').val('').parent().parent().prev().html('邮箱');
            userYzm.val('').parent().prev().html('邮箱验证码');
            tishi.html('请输入正确格式的邮箱');
            reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        });


        picBtn.click(function () {
            addImgRequest('#J-m-img');
        });
        addImgRequest('#J-m-img');

        phoneYzmBtn[0].onclick = getPhoneYzm;


        //校验手机号或邮箱格式
        username.blur(function () {
            if (reg.test(this.value)) {
                validatePhone(this.value);
            }
            else {
                userFlag = false;
                $(this).next().css({
                    display: 'block'
                });
            }
        });

        userYzm.keyup(function () {
            if (($(this).val() != '') && userFlag) {
                oSub.removeClass('disabled');
                oSub[0].onclick = next;
            }
            else {
                oSub.addClass('disabled');
                oSub[0].onclick = null;
            }
        });

        function validatePhone(phone){
            $.ajax({
                url: '/findccount/validate/phone',
                type: 'POST',
                dataType: 'json',
                data: {'mobile':phone},
                success: function (data) {
                    var obj=$('#j-m-ckphone1');
                    if (data.code == -1) {//号码为空
                        userFlag = false;
                        obj.css({
                            display: 'block'
                        });
                    }else if(data.code==-2){//符合条件
                        userFlag = true;
                        obj.css({
                            display: 'none'
                        });
                    }else {//不符合条件
                        obj.html("该手机号还未注册");
                        userFlag = false;
                        obj.css({
                            display: 'block'
                        });
                    }
                }

            });
        }

        function getPhoneYzm() {
            if (!userFlag) {
                return;
            }
            stopClick();
            if (username.attr('name') == 'phone') {
                $.ajax({
                    url: '/findccount/validate/code',
                    dataType: 'json',
                    data: {
                        "mobile": username.val(),
                        "imgId": picYzm.attr('data-imgId'),
                        "imgVValue": picYzmInp.val()
                    },
                    success: function (data) {
                        //重置图片验证码
                        if (data.code != 200) {
                            mLayerMsg(data.message);
                            addImgRequest('#J-m-img');
                        }
                    },
                    error: function (str) {

                    }
                })
            }

        }

        function next() {
            var json = null;
            if (username.attr('name') == 'phone') {
                json = {'mobile': username.val(), 'vcode': userYzm.val()};

                $.ajax({
                    url: '/findccount/doNextStep',
                    type: 'POST',
                    dataType: 'json',
                    data: json,
                    success: function (data) {
                        if (data.code == 200) {
                            var uri='&id=' + data.data + '&mobile=' + username.val();
                            uri=encodeURIComponent(uri);
                            window.location = '/findccount/index/reset?uid='+uuid()+uri;
                        } else {
                            mLayerMsg(data.message);
                        }
                    }

                });
            }
        }

        //倒计时60S函数
        function stopClick() {

            var total = 60;

            phoneYzmBtn.addClass('disabled');
            phoneYzmBtn[0].onclick = null;
            phoneYzmBtn.val('60');

            var t = setInterval(function () {
                total--;
                phoneYzmBtn.val(total);

                if (total == 0) {
                    clearInterval(t);
                    phoneYzmBtn.removeClass('disabled');
                    phoneYzmBtn[0].onclick = getPhoneYzm;
                    phoneYzmBtn.val('重新发送');
                }
            }, 1000);
        }

        //获取图片验证码
        function addImgRequest(imgId) {

            var oImg = $(imgId);

            var u = uuid();
            oImg.attr('data-imgId', u);
            oImg.attr('src', '/validateCode?imgId=' + u);
        }

        //uuid
        function uuid() {
            var str = '0123456789abcdef';
            var res = '';
            for (var i = 0; i < 32; i++) {
                res += str.charAt(Math.floor(Math.random() * 16));
            }

            return res;
        }
        //mqz 类似layer.msg的不固定窗口提示文字
        function mLayerMsg(msg){

            //所有页面的提示框id固定
            var oBox=$('#M_layer_box');
            oBox.html(msg);

            oBox.css({
                display:'block'
            });

            setTimeout(function(){
                oBox.css({
                    display:'none'
                });
            },2000);
        }
    })();
</script>


</body>
</html>